<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>brand管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/elementui.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">

    <!-- 上传图片框样式，不使用上传组件可以删除此样式 -->
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 150px;
            height: 70px;
            line-height: 150px;
            text-align: center;
        }

        .avatar {
            width: 150px;
            height: 70px;
            display: block;
        }

    </style>

</head>
<body class="hold-transition">
<div id="app">

    <div class="content-header">
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="app-container">
        <div class="box">


            <!--查询表单与新增按钮-->
            <div class="filter-container">
                <el-form :inline="true">
                    <el-form-item label="品牌名称">
                        <el-input v-model="searchMap.name" placeholder="品牌名称" class="filter-item"></el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input v-model="searchMap.seq" placeholder="排序" class="filter-item"></el-input>
                    </el-form-item>

                    <el-button class="dalfBut" @click="fetchData()">查询</el-button>
                    <el-button type="primary" class="butT" @click="formVisible=true;pojo={}">新增</el-button>
                </el-form>
            </div>


            <!--            商品品牌表格-->
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="商品id" width="150"></el-table-column>
                <el-table-column prop="name" label="商品名称" width="200"></el-table-column>
                <el-table-column prop="caption" label="商品副标题" width="150"></el-table-column>
                <el-table-column prop="status" label="是否审核通过" width="150" align="center">
                    <template slot-scope="scope" >
                        <el-switch
                                v-model="scope.row.status"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-value="1"
                                inactive-value="0"
                                disabled>
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="是否上架" width="250" align="center">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.isMarketable"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-value="1"
                                inactive-value="0"
                                disabled>
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button @click="putGoods(scope.row.id)" type="primary" size="medium">上架
                        </el-button>
                        <el-button @click="pullGoods(scope.row.id)" type="danger" size="medium">下架
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>


            <!--            分页展示条-->
            <div class="pagination-container">
                <el-pagination
                        class="pagiantion"
                        @size-change="fetchData"
                        @current-change="fetchData"
                        :current-page.sync="currentPage"
                        :page-sizes="[5,10,15]"
                        :page-size.sync="size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>

        </div>
    </div>


</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                currentPage: 1,
                total: 10,
                size: 10,
                searchMap: {
                    // status:'0',
                },
                pojo: {},
                formVisible: false,
                imageUrl: ''
            }
        },
        created() {
            this.fetchData();
        },
        methods: {
            fetchData() {
                axios.post(`/spu/findPage.do?page=${this.currentPage}&size=${this.size}`, this.searchMap).then(response => {
                    this.tableData = response.data.rows;
                    this.total = response.data.total;
                })
                ;
            },

            // //新增方法
            // save() {
            //     this.pojo.image = this.imageUrl; //如页面有图片上传功能放开注释
            //     axios.post(`/brand/${this.pojo.id == null ? 'add' : 'update'}.do`, this.pojo).then(response => {
            //         this.fetchData(); //刷新列表
            //         this.formVisible = false;//关闭窗口
            //     })
            //     ;
            // },

            // //修改方法
            // edit(id) {
            //     this.formVisible = true // 打开窗口
            //     // 调用查询
            //     axios.get(`/brand/findById.do?id=${id}`).then(response => {
            //         this.pojo = response.data;
            //         this.imageUrl = this.pojo.image //显示图片  如页面有图片上传功能放开注释
            //     })
            // },

            // //删除方法
            // dele(id) {
            //     this.$confirm('确定要删除此记录吗?', '提示', {
            //         confirmButtonText: '确定',
            //         cancelButtonText: '取消',
            //         type: 'warning'
            //     }).then(() => {
            //         axios.get(`/brand/delete.do?id=${id}`).then(response => {
            //             this.fetchData(); //刷新列表
            //         })
            //     })
            // },

            // //上传成功的方法
            // handleAvatarSuccess(res, file) {
            //     this.imageUrl = file.response;
            // },

            // //图片上传之前判断格式大小
            // beforeAvatarUpload(file) {
            //     const isJPG = file.type === 'image/jpeg';
            //     const isLt2M = file.size / 1024 / 1024 < 2;
            //
            //     if (!isJPG) {
            //         this.$message.error('上传头像图片只能是 JPG 格式!');
            //     }
            //     if (!isLt2M) {
            //         this.$message.error('上传头像图片大小不能超过 2MB!');
            //     }
            //     return isJPG && isLt2M;
            // },

            putGoods(id) {
                axios.get(`/spu/put.do?id=${id}`).then(response => {
                    if (response.data.code == 0) {
                        alert("商品上架成功");
                    }else {
                        alert("商品信息错误或暂未通过审核")
                    }
                    this.fetchData();
                })
            },
            pullGoods(id) {
                axios.get(`/spu/pull.do?id=${id}`).then(response => {
                    if (response.data.code == 0) {
                        alert("商品下架成功");
                    }
                    this.fetchData();
                })
            },

        }
    })
</script>
</html>
